.top-bar{
    width: 90%;
    height: 10px;
    background-color: #474343;

    display: flex;
    justify-content: space-between;
   align-items: center;
    padding: 20px;

}
.top-bar p{
font-size: 13px;
color: #444;
letter-spacing: 0,5px;
}
/* ===== HEADER GLOBAL ===== */
.header {
  width: 100%;
  background-color: #413c3c;
  border-bottom: 1px solid #e5e5e5;
  flex-direction: column;
  display: flex;
  padding: 20 px;
  box-sizing: border-box;
}
.header-top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 10 px;
  width: 100% ;

}

/* Conteneur central */
.header-container {
  max-width: 100px;
  margin: auto;
  padding: 15px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Conteneur des icônes */
.header-icons {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Chaque icône + texte */
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 12px;
}

/* Taille RÉELLE et PRO des icônes */
.icon-item img {
  width: 24px;      /* ✅ taille normale e-commerce */
  height: 24px;
  micons {
  display: flex;
  align-items: center;
  gap: 28px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 11px;
}

/* NORMALISATION DES CAPTURES D’ÉCRAN */
.icon-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;   /* 🔥 clé pour captures d’écran */
  display: block;
}

/* Texte */
.icon-item span {
  margin-top: 4px;
  font-size: 11px;
}margin-bottom: 4px;
}

/* Texte sous les icônes */
.icon-item span {
  font-size: 11px;
}
/* ===== HEADER GLOBAL ===== */
.main-header {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Conteneur central */
.header-container {
  max-width: 1200px;
  flex-direction: column;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header {
  display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 60px;
background-color: #f4f3f8;
}
.logo h1{
  font-size: 28px;
font-weight: 600;
letter-spacing: 1 px ;
margin: 0%;
color: #3c68c6;
 font-family: Georgia, 'Times New Roman', Times, serif;
 margin-bottom: 0;
}

.logo p{
  margin-top: 6 px;
font-size: 14 px;
color: #0d0d0d;
font-weight: italic;
margin-top: 0;
}
.logo{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.icons{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  align-items: center;

}
.icon-item{
  display: flex;
  flex-direction:column ;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 11px;
}
.icon-item img{
  width: 22px;
  height: 22px;
  
}
.top-bar {
    background-color: #f8f8f8; /* Gris très clair */
    padding: 8px 5%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5%;
    background: white;
}

.search-container{
  display: flex;
  align-items: center;
  width: 450px;
  margin: 0 40px;
}

.search-container input {
    flex: 1;
    width: 350 px;
    padding: 12px 20px;
    border: 1px solid #ddd;
    border-radius: 30px 0 0 30px;
    background-color: #fcfcfc;
    font-size: 16px;
    border-right: none;
    outline: none;
}

.search-container button{
  padding: 12 20px;
  background-color: #ddd;
  border: 1px solid #ccc ;
  border-radius: 0 30px 30px 0;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: none;
  display: flex;
}
.search-container button i,
.search-container button span,
.search-container button{
  font-size: 30px;
  color: #555;
}

.header-icons {
    display: flex;
    gap: 20px;
    font-size: 13px;
    align-items: center;
}


.top-bar-info span { margin-right: 20px; }

.header-nav {
  display: flex !important;
  justify-content: flex-start !important;
  padding-left: 5% !important;
    margin-top: 20px  !important;
    width: 100%  !important;
    box-sizing: border-box  !important;
}

ul {
    list-style: none;
    display: flex;
    justify-content: center; /* Centre le menu */
    gap: 30px;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase; /* Tout en majuscules */
    letter-spacing: 1px;
}
nav a:hover {
    color: #1a4a7c; /* Bleu denim au survol */
}
.header-nav ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important ;
    display: flex !important;
    
    gap: 40px!important ;
}


.presentoir{
  width: 100%;
}

.container-article{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}

.article  {
  flex: 1 1 3OOpx;
  max-width: 500 px;
  border: 2 px solid #b3a7a7;
  padding: 15px;
   text-align: center;
   

@media(max-width: 400px){
  .article{
    flex: 1 1 100%;
    max-width: none;

  }
}

}
/* Grille principale : 3 colonnes sur ordinateur */
.container-article {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes égales */
    gap: 25px;                            /* Espace entre les cadres */
    padding: 20px;
}

/* Le cadre autour de chaque article */
.article {
    border: 1px solid #e0e0e0;   /* Bordure légère */
    border-radius: 8px;          /* Coins arrondis */
    padding: 15px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Ombre douce pour distinguer */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;  /* Animation fluide */
}

.article:hover {
    transform: translateY(-5px); /* Petit effet de soulèvement au survol */
}

/* Uniformiser la taille des images */
.article img {
    width: 100%;
    height: 250px;       /* Hauteur fixe pour tout aligner */
    object-fit: cover;   /* Remplit le cadre sans déformer l'image */
    border-radius: 4px;
    margin-bottom: 15px;
}

.presentoir{
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}

.hero-text{
  position:absolute;
  top:190px;
  left:30px;
  transform:translate(-0px);
  max-width: 400px;
}

.hero-text h1{
  font-size: 42px;
  margin-bottom:15px ;
  color: #3c68c6;
  
}
.hero-text p{
  font-size: 18px;
  line-height:20px
}
.btn{
  display: inline-block;
  padding: 12px 25px;
  background: #382626;
  color: white;
 text-decoration: none;
 border-radius: 5px;

}
 
.footer {
  background-color: white; /* fond sombre */
  padding: 50px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}
.footer-container{
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4,1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-col h3{
  font-size: 16px;
  margin-bottom:15px ;

}
.footer-col p{
  
  font-size: 5px;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Titres des colonnes */




.footer ul {
  display: grid;
  list-style: none; /* enlève les points */
  padding: 1;
  gap: 10 px;
}

.footer ul li {
  margin-bottom: 0px;
  font-size: 10px;
  color: black;
  line-height: 0,5;
  margin: 0;

}

/* Liens du footer */
.footer ul li a {
  text-decoration: none; /* pas de soulignement */
  color: black;
  font-size: 10 px;
}

.footer ul li a:hover {
  color: #ffffff;
}


.footer-bottom {
  margin-top: 150px;
  background-color: #121212;
  text-align: left;
  padding: 0px;
  font-size: 13px;
  color:black;
  padding: 0;
  background-color: white;
  color: black;
  font-family: "poppins", sans serif;
}

body{
  background-color: rgb(31, 30, 30);

}